<template>
  <div>
    <div class="newcd-body">
      <div class="newcd-wrap">
        <!-- 热门新碟内容开始 -->
        <div class="top-title">
          <h3>热门新碟</h3>
        </div>
        <ul class="top-ul">
          <li v-for="{ id, name, picUrl, artist } in data" :key="id">
            <div class="top-div">
              <img :src="picUrl" alt="" class="j-img" />
              <a href="javascript:;" class="mask"></a>
              <a href="javascript:;" class="icon-play" title="播放"></a>
              <p class="f-thide">
                <a href="javascript:;">{{ name }}</a>
              </p>
              <p class="tit-thide">
                <a href="javascript:;">{{ artist.name }}</a>
              </p>
            </div>
          </li>
        </ul>
        <!-- 全部新碟内容 -->
        <div class="down-title">
          <h3>全部新碟</h3>
          <div class="down-tab">
            <router-link to="/newcd/ALL">全部</router-link>
            <span>|</span>
            <router-link to="/newcd/ZH">华语</router-link>
            <span>|</span>
            <router-link to="/newcd/EA">欧美</router-link>
            <span>|</span>
            <router-link to="/newcd/KR">韩国</router-link>
            <span>|</span>
            <router-link to="/newcd/JP">日本</router-link>
          </div>
        </div>
        <ul class="down-ul">
          <li v-for="{ id, name, picUrl, artist } in twodata" :key="id">
            <div class="down-div">
              <img :src="picUrl" alt="" class="j-img" />
              <a href="javascript:;" class="mask"></a>
              <a href="javascript:;" class="icon-play" title="播放"></a>
              <p class="f-thide">
                <a href="javascript:;">{{ name }}</a>
              </p>
              <p class="tit-thide">
                <a href="javascript:;">{{ artist.name }}</a>
              </p>
            </div>
          </li>
        </ul>
        <!-- 分页栏 -->
        <div class="newcd-fenye">
          <el-pagination background layout="prev, pager, next" :total="350">
          </el-pagination>
        </div>
      </div>
    </div>
    <div title="回到顶部" class="m-block" @click="goTop"></div>
  </div>
</template>

<script>
import myNavbar from "@/components/myNavbar.vue";
import { createLogger } from "vuex";
export default {
  components: { myNavbar },
  mounted() {
    this.getData();
    this.getTwo();
  },
  data() {
    return {
      data: null,
      twodata: null,
    };
  },
  methods: {
    getData() {
      this.axios.get("/top/album").then((res) => {
        console.log(res);
        this.data = res.data.weekData.slice(0, 10);
      });
    },
    getTwo() {
      console.log(this.$route.path.slice(this.$route.path.lastIndexOf('/')+1))
      this.axios.get(`/album/new?area=${this.$route.path.slice(this.$route.path.lastIndexOf('/')+1)}&limit=35`).then((res) => {
        console.log("TWOres", res);
        this.twodata = res.data.albums;
        console.log(this.twodata);
        console.log(this)
      });
    },
    goTop(){
      window.scrollTo(0,0)
    }
  },
};
</script>

<style>
.newcd-body {
  width: 980px;
  height: 100%;
  min-height: 1500px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  font-size: 12px;
  color: #333;
}
.newcd-wrap {
  padding: 40px;
}
/* 热门新碟内容 */
.top-title {
  height: 40px;
  border-bottom: 2px solid #c20c0c;
}
.top-title > h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.top-ul {
  margin: 20px 0 0 -33px;
}
.top-ul > li {
  width: 153px;
  height: 178px;
  padding-left: 33px;
  display: inline-block;
  padding: 0 0 30px 33px;
  line-height: 1.4;
  list-style: none;
}
.top-div {
  width: 130px;
  height: 130px;
  position: relative;
}

.top-div:hover .icon-play {
  position: absolute;
  right: 10px;
  left: 94px;
  bottom: 5px;
  width: 28px;
  height: 28px;
  background-position: 0 -140px;
  display: inline-block;
  background-image: url("../assets/images/iconall.png");
}
.top-div > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.top-div > .mask {
  width: 153px;
  height: 130px;
  background-position: 0 -845px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../assets/images/coverall.png");
}
.top-div > .icon-play {
  position: absolute;
  right: 10px;
  left: 94px;
  bottom: 5px;
  width: 28px;
  height: 28px;
  background-position: 0 -140px;
  display: none;
  background-image: url("../assets/images/iconall.png");
}
.top-div > .f-thide {
  margin-top: 7px;
  font-size: 12px;
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.top-div > .f-thide a {
  color: #000;
}

.top-div > .tit-thide {
  font-size: 12px;
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.top-div > .tit-thide a {
  color: #666666;
}

/* 全部新碟内容 */
.down-title {
  display: block;
  height: 40px;
  border-bottom: 2px solid #c20c0c;
}
.down-title > h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.down-tab {
  float: left;
  margin: 12px 0 0 20px;
}
.down-tab > a {
  color: #666;
}
.down-tab > span {
  margin: 0 10px;
  color: #c7c7c7;
}
/* 音乐合集35 */
.down-ul {
  margin: 20px 0 0 -33px;
}
.down-ul > li {
  width: 153px;
  height: 178px;
  padding-left: 33px;
  display: inline-block;
  padding: 0 0 30px 33px;
  line-height: 1.4;
  list-style: none;
}
.down-div {
  width: 130px;
  height: 130px;
  position: relative;
}

.down-div:hover .icon-play {
  position: absolute;
  right: 10px;
  left: 94px;
  bottom: 5px;
  width: 28px;
  height: 28px;
  background-position: 0 -140px;
  display: inline-block;
  background-image: url("../assets/images/iconall.png");
}
.down-div > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.down-div > .mask {
  width: 153px;
  height: 130px;
  background-position: 0 -845px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../assets/images/coverall.png");
}
.down-div > .icon-play {
  position: absolute;
  right: 10px;
  left: 94px;
  bottom: 5px;
  width: 28px;
  height: 28px;
  background-position: 0 -140px;
  display: none;
  background-image: url("../assets/images/iconall.png");
}
.down-div > .f-thide {
  margin-top: 7px;
  font-size: 12px;
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.down-div > .f-thide a {
  color: #000;
}

.down-div > .tit-thide {
  font-size: 12px;
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.down-div > .tit-thide a {
  color: #666666;
}


/* 分页栏开始 */
.newcd-fenye {
  width: 100%;
  text-align: center;
 margin: 20px 0;
}

/* 回到顶部 */
.m-block {
  display: block;
  position: fixed;
  text-indent: -9999px;
  left: 50%;
  margin-left: 500px;
  bottom: 160px;
  width: 49px;
  height: 44px;
  background-position: -265px -47px;
  background-image: url("../assets/images/dingbu.png");
}
</style>